---

---
title: "Distribution of the articles' publishing model by country's income level of corresponding authors"
output:
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    theme: spacelab
    source_code: embed
    fontsize: 16pt
---

```{r include = FALSE}
knitr::opts_chunk$set(echo=FALSE,warning=FALSE,message=FALSE)
```

```{js}
function filter_default() {
    var select_field=document.getElementById("FIELD-filter");
    select_field.selectedIndex = "5";
    select_field.onchange();
 }
$(document).ready(filter_default);
```

```{r}
library(crosstalk)
library(reactable)
library(lubridate)
library(hrbrthemes)
library(tidyverse)
library(htmltools)
library(sparkline)
library(dplyr)

income_model_field_gender1<-read.table("income_gender_field_model.csv",header=TRUE,sep=",",quote="\r",dec = ".")
income_model_field_gender<-select(income_model_field_gender1,INCOME_GROUP,
                                  FIELD,ntotal_gender,n_men,n_women,n_nogender,Model,n_total_models,percent_model)


htmltools::browsable(
  tagList(
    div(
      div(tags$label("Filter based on field", `for` = "FIELD-filter")),
      tags$select(
        id = "FIELD-filter",
        onchange = "Reactable.setFilter('filter-table', 'FIELD', this.value)",
        #tags$option("All", value = ""),
        lapply(unique(income_model_field_gender$FIELD), tags$option)
      )
    ),
    tags$hr("aria-hidden" = "false"),

    reactable(
      defaultColDef = colDef(show = F),
  income_model_field_gender,elementId = "filter-table",
  groupBy = "INCOME_GROUP",
  columns = list(
    INCOME_GROUP = colDef(name="income level",show=T),
    ntotal_gender = colDef(name="number of all corresponding authors",show=T,
                           aggregate = "sum",format = colFormat( separators = TRUE)),
    n_men = colDef(name="number of male corresponding authors",show=T,aggregate = "sum",format = colFormat( separators = TRUE)),
    n_women = colDef(name="number of male corresponding authors",show=T,aggregate = "sum",format = colFormat( separators = TRUE)),
    Model = colDef(name="publishing model",show = T,
      style = function(value) {
        if (value == "Gold Open Access") {
              color <- "#feb24c"
            } else if (value == "Closed Access") {
              color <- "red"
            } else if (value == "Not Given") {
              color <- "grey"
            } else if (value == "Hybrid (Open Choice)") {
              color <- "#C08DDF"
            }
        list(color = color)
      }),
    percent_model = colDef(show=T,name="percentage of articles in this model",
      cell = function(value,index){
            if (income_model_field_gender$Model[index] == "Gold Open Access") {
              color <- "#feb24c"
            } else if (income_model_field_gender$Model[index] == "Closed Access") {
              color <- "red"
            } else if (income_model_field_gender$Model[index] == "Not Given") {
              color <- "grey"
            } else if (income_model_field_gender$Model[index] == "Hybrid (Open Choice)") {
              color <- "#C08DDF"
            }
            width <- paste0(value*100, "%")
            value <- format(value, big.mark = ",")
            value <- format(value, width = 10, justify = "right")
            bar <- div(style = list(background = color, width = width, height = "16px"))
            chart <- div(style = list(flexGrow = 1, marginLeft = "8px", background = "#e1e1e1"), bar)
            div(style = list(display = "flex", alignItems = "center"),span(class = "number", width), chart)
        },format = colFormat(percent = TRUE, digits = 1))
  )
)
  )
)






```

```{css}
.bar-cell {
  display: flex;
  align-items: center;
}

.number {
  font-size: 13.5px;
  white-space: pre;
}

.bar-chart {
  flex-grow: 1;
  margin-left: 6px;
  height: 22px;
}

.bar {
  height: 100%;
}
```